<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
<link rel="stylesheet" href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
<title>零食小吃</title>
<script src="<%=basePath%>assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath%>assets/js/fontSize.js"></script>
<link rel="stylesheet" href="<%=basePath%>/assets/imgTools/helmet.css">

<style>

.paixu {
	border-bottom: 1px solid #f8f8f8
}

.paixu ul li {
	float: left;
	padding: 0 0.3rem;
}

.paixu ul li a {
	font-size: 0.24rem;
	line-height: 0.6rem;
}

.content {
	padding-top: 0.8rem;
}

.content_cont ul li {
	padding: 0.2rem 0;
	border-bottom: 1px solid #f1f1f1
}

.shangjiatupian {
	width: 25%;
	float: left;
}

.shangjiajieshao {
	width: 70%;
	float: right;
	line-height: 0.4rem;
}

.goodsName {
	font-size: 0.24rem;
	line-height: 0.32rem;
	height: 1.1rem;
}

.dianpupaiming {
	font-size: 0.2rem;
	line-height: 0.36rem
}

.dianpubiaoqian {
	font-size: 0.18rem;
	border: 1px solid red;
	color: red;
	padding: 0.04rem;
	margin-left: 0.1rem;
}

.noSJ {
	width: 100%;
}

.noSJ img {
	width: 50%;
	margin: 30% auto 10%;
	display: block
}

.noSJ h3 {
	width: 100%;
	font-size: 0.25rem;
	line-height: 0.6rem;
	font-weight: bold;
	text-align: center
}

.noSJ p {
	width: 100%;
	font-size: 0.24rem;
	line-height: 0.6rem;
	text-align: center
}
</style>
<script>
	$(function() {
		$('.header_bot ul').find('li').each(function() {
			$(this).click(function() {
				$(this).siblings().removeClass('active');
				$(this).addClass('active');
			})
		})
	})
</script>
</head>
<body>
	<input id="basePath" type="hidden" value="<%=basePath%>">
	<div class="header">
		<div class='header_top'>
	        <a class=returnInfo href="#" onclick="javascript:history.go(-1);"><i class="fa fa-angle-left"></i></a>
	        <div class="header_top">零食小吃</div>
    	</div>
	</div>
<%-- 	<c:choose> --%>
			<div class="content">
				<div class="content_cont">
					<ul id="ul">
<%-- 						<c:forEach items="${goodsList}" varStatus="i" var="item"> --%>
<!-- 							<li> -->
<%-- 								<a href="<%=basePath%>app/toGoodsInfo?goodsId=${item.goodsId}" class="clearFirx">  --%>
<%-- 									<img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${item.goodsThums}" alt="" class="shangjiatupian"> --%>
<!-- 									<div class="shangjiajieshao"> -->
<%-- 										<h3 class="goodsName">${item.goodsName}</h3> --%>
<!-- 										<div> -->
<%-- 											<span class="goodsPrice" style="color: red;">￥<i style="font-size: 16px;">${item.goodsPrice}</i></span> --%>
<%-- 											<p style="float: right; color: #9e8686; font-size: 0.2rem;" class='浏览量'>浏览量${item.pageView}</p> --%>
<!-- 										</div> -->
<!-- 									</div> -->
<!-- 								</a> -->
<!-- 							</li> -->
<%-- 						</c:forEach> --%>
					</ul>
				</div>

			</div>
<%-- 		</c:when> --%>
<%-- 		<c:otherwise> --%>
			<div class="noSJ">
				<img src="<%=basePath%>assets/images/bcz.png" alt="">
				<h3>没有宝贝哦！</h3>
			</div>
<%-- 		</c:otherwise> --%>
<%-- 	</c:choose> --%>
</body>
<script>
	
	$(function() {
		$('.content_cont').find('li').each(
				function() {
					$(this).find('a').find('img').height(
							$(this).find('a').find('img').width());
					var goodsNameHtml = $(this).find('.goodsName').html();
					$(this).find('.goodsName')
							.html(showText(goodsNameHtml, 33))
				})
	})
	function showText(text, numSub) {
		if (text == null) {
			return "";
		}
		if (text.length > numSub) {
			return text.substring(0, numSub) + "...";
		}
		return text;
	}
	
	var geting = false;//是否加载信息，默认为false
    var currentPage = 1;//当前页
    var pageSize = 5;//每页数据数
    getData();
    $(window).scroll(function () {
   		if (geting) {
               return;
           }
           var scrollTop = $(this).scrollTop();
           var scrollHeight = $(document).height();
           var windowHeight = $(this).height();
           if (scrollTop + windowHeight == scrollHeight) {
           	currentPage++;
               getData();
           }
        
    });
    function getData() {
    	geting = true;
    	$.ajax({
			url : "<%=basePath%>app/goodsByClassifyList",
			async:false,
			dataType : "json",
			type : "post",
			data : {
				"currentPage" : currentPage,
				"pageSize" : pageSize,
				"classifyId1":3
			},
			success : function(data) {
				$.each(data, function (i, item) {
					$(".noSJ").hide()
					var html = '<li>'+
						'<a href="<%=basePath%>app/toGoodsInfo?goodsId='+item.goodsId+'" class="clearFirx"> '+
							'<img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage='+item.goodsThums+'" alt="" class="shangjiatupian">'+
							'<div class="shangjiajieshao">'+
								'<h3 class="goodsName">'+item.goodsName+'</h3>'+
								'<div>'+
									'<span class="goodsPrice" style="color: red;">￥<i style="font-size: 16px;">'+item.goodsPrice+'</i></span>'+
									'<p style="float: right; color: #9e8686; font-size: 0.2rem;" class="浏览量">浏览量'+item.pageView+'</p>'+
								'</div>'+
							'</div>'+
						'</a>'+
					'</li>';
					$("#ul").append(html);
					geting = false;
				})
			},
			error : function(data) {
				alert("网络错误");
			}
		})
		var swiper = new Swiper('.swiper-container', {
			slidesPerView : 3.5,
			spaceBetween : 5,
			pagination : {
				clickable : true,
			},
		});
    }
	
</script>
</html>